<template>
	<view class="hang_up">
		<view class="hang_content">
			<view class="lable_title">
				挂起原因
			</view>
			<view class="pic_img">
				<uni-easyinput type="textarea" placeholderStyle="font-size:14px;"  :maxlength="100" v-model="workSuspendVo.remark"
					placeholder="请输入挂起原因"></uni-easyinput>
				<view class="coun">
					{{workSuspendVo.remark.length}}/100
				</view>
			</view>

			<view class="lable_title">
				挂起图片({{imgarr.length}}/6)
			</view>
			<view class="pic_img">
				<uni-file-picker @select="onsuccessImg" file-extname="jpg,jpeg,png" limit="6" :auto-upload="false" @delete="ondeleteImg"
					file-mediatype="image" v-model="imgarr" />
			</view>

		</view>
		<view class="btn_word">
			<button type="primary" class="btn_bor" @click="onSubmitHangup">提交</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		nextTick, onMounted
	} from "vue"
	import _ from "lodash"
	import store from '@/store_network/index.js'
	import { onReachBottom, onPullDownRefresh, onUnload, onLaunch, onLoad, onShow, onHide } from '@dcloudio/uni-app'
	import apiOrder from "@/util/network_api/apiOrder.js"
	import apiUpload from '@/util/network_api/upload.js'
	const workSuspendVo = ref({
		"paths": [],
		"remark": ""
	})
	const imgarr = ref([])
	const workId = ref()
	// 通过onLoad接收数据
	onLoad((e) => {
		if (e) {
			workId.value = e.workId
		}
	})
	onUnload(() => {
		uni.hideLoading()
	})
	const onsuccessImg = (files) => {
		files.tempFiles.map(o => {
			imgarr.value.push(o)
		})
	}
	const ondeleteImg = (file) => {
		imgarr.value = imgarr.value.filter(o => {
			return o.uuid != file.tempFile.uuid
		})
	}
	const onSubmitHangup = async () => {
		if (!workId.value) return
		workSuspendVo.value.paths = []
		uni.showLoading({
			title: '加载中...'
		})
		if (imgarr.value.length > 0) {
			for (let i = 0; i < imgarr.value.length; i++) {
				let tmp = imgarr.value[i]
				await apiUpload.uploadOrderFile({ files: tmp.file }).then(res => {
					workSuspendVo.value.paths.push(res.data.rows[0])
				})
			}
		}
		await apiOrder.networkEmpApplySuspendOrder(workSuspendVo.value, workId.value).then(res => {
			if (res.code == 20000) {
				uni.hideLoading()
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				uni.setStorageSync('order_detail', 1)
				uni.redirectTo({
					url: '/pages/pages_network/order/detail?workId=' + workId.value
				})
			}
		})
		uni.hideLoading()
	}
</script>

<style lang="scss" scoped>
	.hang_up {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		background-color: #fafafa;
		// padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		flex: 1;

		.hang_content {
			background-color: #fff;
			height:80%;
			margin: 24rpx;
			padding: 32rpx;

			.lable_title {
				font-size: 28rpx;
				// color: #777;
				padding: 24rpx 0 0;
			}

			.pic_img {
				margin: 32rpx;
				position: relative;

				.coun {
					font-size: 22rpx;
					position: absolute;
					right: 12rpx;
					bottom: 6rpx;
					color: #999;
				}

				:deep(.icon-add) {
					width: 40rpx;
					height: 3rpx;
					background-color: #aaa;
				}

				:deep(.icon-del) {
					width: 24rpx;
				}

				:deep(.icon-del-box) {
					width: 40rpx;
					height: 40rpx;
					top: 0;
					right: 0;
					background-color: rgba(0, 0, 0, 0.3);
				}

				:deep(.uni-progress-bar) {
					display: none;
				}
			}
		}

		.btn_word {
			padding: 24rpx 48rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 2;

			:deep(button:after) {
				border: none !important;
			}

			.btn_bor {
				width: 100%;
				font-size: 32rpx;
				border-radius: 50rpx;
				background-color: #007cff;
			}
		}
	}
</style>